<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title th:text="${article.article_title}">文章标题</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/libs/font-awesome/6.0.0/css/all.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    body {
      font-family: 'Roboto', Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
    }

    header {
      background: linear-gradient(to bottom, #0099ff, #007BFF);
      color: white;
      padding: 10px 0;
      text-align: center;
    }

    nav {
      margin: 10px 0;
      display: flex;
      justify-content: center;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 15px;
      transition: color 0.3s ease;
    }

    nav a:hover {
      color: #f0f0f0;
    }

    article {
      max-width: 800px;
      margin: 30px auto;
      padding: 30px;
      background-color: white;
      border-radius: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: box-shadow 0.3s ease;
    }

    article:hover {
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

    h1 {
      margin-top: 0;
      color: #222;
      font-size: 32px;
      font-weight: bold;
      line-height: 1.2;
      border-bottom: 2px solid #007BFF;
      padding-bottom: 10px;
    }

    p {
      color: #555;
      font-size: 18px;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    h2 {
      color: #444;
      font-size: 24px;
      margin-top: 30px;
      margin-bottom: 15px;
    }

    button {
      background: linear-gradient(to bottom, #0099ff, #007BFF);
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    button:hover {
      background: linear-gradient(to bottom, #00b3ff, #0099ff);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .comment {
      border-top: 1px solid e2e2e2;
      padding-top: 20px;
      margin-top: 20px;
      transition: background-color 0.3s ease;
      background-color: f9f9f9;
    }

    .comment:hover {
      background-color: f4f9f4;
    }

    .comment p strong {
      color: 333;
      font-weight: bold;
    }

    .comment p span {
      color: 555;
      font-size: 16px;
    }

    p time {
      color: 888;
      font-size: 14px;
    }

    form {
      margin-top: 30px;
    }

    form label {
      display: block;
      color: 666;
      font-size: 16px;
      margin-bottom: 10px;
    }

    form textarea {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid ccc;
      border-radius: 20px;
      font-size: 16px;
      resize: vertical;
    }

    form input[type="submit"] {
      padding: 10px 20px;
      background: linear-gradient(to bottom, #0099ff, #007BFF);
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    form input[type="submit"]:hover {
      background: linear-gradient(to bottom, #00b3ff, #0099ff);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>

<body>
<header>
  <nav>
    <div class="nav-links">
      <a href="/index"><i class="fas fa-home"></i> 主页</a>
      <a href="/personalhomepage">个人主页</a>
      <a href="/search.html">搜索文章</a>
    </div>
  </nav>
</header>
<button type="button" onclick="window.location.href='/index';">返回首页</button>
<article>
  <h1 th:text="${article.article_title}"></h1>
  <h1>作者:</h1><h1 th:text="${article.articler}"></h1>
  <p><time th:text="${article.article_time}"></time></p>
  <p th:text="${article.article_text}"></p>

  <!-- 新增的展示附件及下载功能部分 -->
  <p th:if="${article.article_attachment!= null}">
    附件：<a href="#" class="doloadLink" th:href="@{/downloadAttachment/{articleId}(articleId=${article.article_id})}" th:text="${article.article_attachment}">下载附件</a>
  </p>
  <p th:if="${article.article_attachment == null}">无附件</p>

  <div th:if="${not #lists.isEmpty(comments)}">
    <h2>评论：</h2>
    <div class="comment" th:each="comment : ${comments}">
      <p><strong th:text="${comment.commenter}"></strong>：<span th:text="${comment.comment_text}"></span> <time th:text="${comment.createtime}"></time>
        <span th:if="${article.user_id == session.user.userid || comment.userid == session.user.userid}">
                        <a href="#" class="deleteCommentLink" th:href="@{/deleteComment/{commentId}(commentId=${comment.comment_id})}">删除</a>
                    </span>
      </p>
    </div>
  </div>
  <p th:if="${#lists.isEmpty(comments)}">暂无评论，快来发表你的看法吧！</p>
  <form th:action="@{/addComment/{articleId}(articleId=${article.article_id})}" method="post">
    <label for="comment_text">评论内容：</label>
    <textarea id="comment_text" name="comment_text" required></textarea><br>
    <input type="submit" value="发表评论" id="submitCommentButton">
  </form>
</article>

<script>
  $(document).ready(function () {
    // 为发表评论按钮添加点击事件监听
    $('#submitCommentButton').click(function (e) {
      e.preventDefault(); // 阻止表单默认提交行为

      // 弹出询问确定窗口
      if (confirm("你确定要发表这条评论吗？")) {
        // 如果用户点击确定，继续提交表单
        $(this).closest('form').submit();
      }
    });

    // 为所有删除评论链接添加点击事件监听
    $('.deleteCommentLink').click(function (e) {
      e.preventDefault(); // 阻止链接默认跳转行为

      // 弹出询问确定窗口
      if (confirm("你确定要删除这条评论吗？")) {
        // 如果用户点击确定，继续执行删除操作
        window.location.href = $(this).attr('href');
      }
    });

    $('.doloadLink').click(function (e) {
      e.preventDefault(); // 阻止链接默认跳转行为

      // 弹出询问确定窗口
      if (confirm("你确定要下载附件？")) {
        // 如果用户点击确定，继续执行删除操作
        window.location.href = $(this).attr('href');
      }
    });

  });
</script>
</body>

</html>